<template>
  <div class="icons">
    <h2>本项目用到的图标大全 ({{ iconList.length }}个)</h2>
    <div class="search">
      <el-input v-model="keyword" placeholder="输入关键词" clearable @change="search" />
      <el-button style="margin-left: 10px" @click="search">搜索</el-button>
    </div>
    <ul>
      <li v-for="(x, y) in iconList" :key="y" :title="x.name">
        <div class="icon-item">
          <span :class="'iconfont icon-' + x.font_class"></span>
        </div>
        <div class="name">{{ x.name }}</div>
        <div class="font_class">{{ x.font_class }}</div>
        <div class="unicode">{{ x.unicode }}</div>
        <div class="copy" @click="copy(x.font_class)">复制</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import icons from '@/assets/font/iconfont.json'
const iconList = ref([])
const olds = ref([])
const keyword = ref('')
onMounted(() => {
  iconList.value = icons.glyphs
  olds.value = icons.glyphs
})
function search() {
  if (keyword.value == '') {
    iconList.value = olds.value
    return
  }
  iconList.value = olds.value.filter(
    (x) => x.name.includes(keyword.value) || x.font_class.includes(keyword.value)
  )
  // console.log(iconList.value)
}

function copy(text) {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage({
      message: '复制成功',
      type: 'success'
    })
  })
}
</script>
<style lang="scss" scoped>
.icons {
  width: 100%;
  height: 100%;
  h2 {
    padding: 10px;
  }
  .search {
    width: 400px;
    padding: 10px;
    display: flex;
  }
  ul {
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    li {
      width: 138px;
      text-align: center;
      cursor: pointer;
      margin: 5px;
      border: 1px solid #ccc;
      padding: 10px;
      div {
        width: 100%;
        height: 24px;
        line-height: 24px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .icon-item {
        height: 70px;
        line-height: 70px;
        span {
          font-size: 36px;
        }
      }
      .name {
        font-weight: 700;
        font-size: 18px;
      }
      .font_class {
        color: #1889fa;
      }
      .unicode {
        color: red;
      }
      .copy {
        width: 40px;
        background-color: #1889fa;
        color: #fff;
        margin: 0 auto;
      }
    }
    li:hover {
      border-color: #1889fa;
    }
  }
}
</style>
